<template>
	<view class="bg-white">
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">点评详情</block>
		</cu-custom>
		
		<view v-if="remarkData.comment_info">
			<view class="padding flex align-center solid-bottom">
				<view>
					<img class="border solid radius" mode="scaleToFill" :src="handleImg()" alt=""
					style="width: 120rpx; height: 120rpx;">
				</view>
				<view class="margin-left">
					<view class="text-bold" style="font-size: 30rpx;">
						<text>
							{{ remarkData.comment_info.username }}
						</text>
						<text class="rate margin-left">
							{{ remarkData.companyInfo.userstars }}分
						</text>
					</view>
					<view v-if="remarkData.companyInfo.infos" class="text-gray" style="font-size: 25rpx;margin-top: 30rpx;">
						{{ remarkData.companyInfo.infos }}人点评
					</view>
				</view>
			</view>
			
			<view class="cu-card article no-card margin-top">
				<view class="margin-left">
					{{ remarkData.comment_info.title }}
				</view>
				<view class="cu-item shadow">
					<view class="padding flex align-center justify-between solid-bottom">
						<view class="flex align-center">
							<image
							style="width: 80rpx; height: 80rpx; border-radius: 50%;"
							src="https://www.newzhihu.com/mvue/image/userImg.png"
							mode="aspectFill"></image>
							<view style="margin-left: 30rpx;">
								<view class="text-cut">
									{{ remarkData.comment_info.username }}
								</view>
								<view class="text-gray" style="font-size: 25rpx;">
									{{ remarkData.comment_info.userinfo }}
								</view>
							</view>
						</view>
						<view class="rate" style="justify-item: end">
							{{ remarkData.comment_info.userstars }}分
						</view>
					</view>
					<view class="content flex-direction">
						<view class="solid-bottom">
							<view v-for="(item,index) in remarkData.comment_info.content_question" :key="index" style="margin-top: 20rpx;">
								<view class="">
									<text class="question">
										问
									</text>
									{{ item.question }}
								</view>
								<view class="text-gray" style="font-size: 25rpx;margin-top: 10rpx;">
									{{ item.question_desc }}
								</view>
							</view>
						</view>
						<view class="flex justify-between align-center" style="margin-top: 20rpx;">
							<view class="text-gray" style="font-size:25rpx">
								阅读量: {{ remarkData.comment_info.allRead }}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="padding flex">
				<view class="text-gray">
					点赞({{ remarkData.comment_info.allZanC }})
				</view>
				<view class="text-gray margin-left">
					评论({{ remarkData.dianping_comment_count }})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		watch: {
			loading(newValue, oldValue) {
				if(newValue){
					uni.showLoading({
						title: '加载中'
					});
				}else{
					uni.hideLoading();
				}
			}
		},
		data() {
			return {
				remarkId: '',
				remarkData: {},
				loading: false
			}
		},
		onLoad(option) {
			if(option.remarkId){
				this.remarkId = option.remarkId
			}
			this.fatchData();
		},
		methods: {
			handleImg(){
				return this.$api.baseUrl + this.remarkData.companyInfo.logo
			},
			async fatchData(){
				this.loading = true
				let res = await this.$api.queryRemarkDetail({
					key: this.$util.getKey(),
					comment_id: this.remarkId,
					uid: this.$util.getUid()
				})
				this.loading = false
				if(res && res.data && res.data.data){
					this.remarkData = res.data.data
				}
			},
		}
	}
</script>

<style>
.question{
	font-weight: 500;
	color: #fff;
	font-size: 10px;
	padding: 2px 3px;
	background: #45A0ED;
	border-radius: 4px 4px 0px 4px;
	margin-right: 0.4rem;
	position: relative;
	top: -1px;
}
</style>
